import React from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Typography } from '@material-ui/core';
import { Image } from 'components/atoms';
import { formatDate } from 'utils/util';
import { useSelector, useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { setArtistItem } from 'redux/actions/SearchArtistsAction';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        height: "100%",
        backgroundColor: "#272727",
        paddingTop: "10%",
        [theme.breakpoints.up('md')]: {
            fontSize: "80px",
            lineHeight: "85px",
            paddingTop: "0",
        },
    },
    typography: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "40px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "40px",
        textTransform: "uppercase",
        color: "#7E53F9",
        [theme.breakpoints.up('md')]: {
            fontSize: "80px",
            lineHeight: "85px",
        },
    },
    typography1: {
        color: "#fff",
    },
    typography2: {
        color: "#7E53F9",
        lineHeight: "20px",
        paddingLeft: "20px",
        fontSize: "12px",
        [theme.breakpoints.up('md')]: {
            textAlign: "center",
            marginTop: "15px",
            paddingLeft: "0",
            fontSize: "16px",
        },
    },
    typography3: {
        color: "#fff",
        fontSize: "20px",
        lineHeight: "20px",
        margin: "10px 0",
        textAlign: "left",
        paddingLeft: "20px",
        [theme.breakpoints.up('md')]: {
            textAlign: "center",
            paddingLeft: "0",
            fontSize: "24px",
            lineHeight: "24px",
        },
    },
    typography4: {
        color: "#fff",
        fontSize: "12px",
        lineHeight: "14px",
        textAlign: "left",
        paddingLeft: "20px",
        marginTop: "50px",
        [theme.breakpoints.up('md')]: {
            textAlign: "center",
            paddingLeft: "0",
            marginTop: "0",
        },
    },
    button: {
        color: "#fff",
        fontSize: "10px",
        padding: "12px 20px",
        border: "1px solid #fff",
        lineHeight: "18px",
        cursor: "pointer",
        display: "none",
        [theme.breakpoints.up('lg')]: {
            padding: "12px 35px",
        },
        [theme.breakpoints.up('md')]: {
            padding: "12px 20px",
            display: "block",
        },
    },
    gridItem: {
        padding: "8% 20px",
        borderTop: "1px solid rgba(255,255,255,0.2)",
        [theme.breakpoints.up('lg')]: {
            padding: "8% 0",
        },
    },
    image: {
        height: "200px",
        [theme.breakpoints.up('md')]: {
            height: "150px",
        },
        [theme.breakpoints.up('lg')]: {
            height: "200px",
        },
    },
    viewAll: {
        padding: "50px 0",
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        [theme.breakpoints.up('md')]: {
            padding: "80px 0",
        },
    },
    button1: {
        color: "#fff",
        fontSize: "12px",
        padding: "12px 40px",
        border: "1px solid #9B9B9B",
        lineHeight: "18px",
        cursor: "pointer",
        fontWeight: 700,
        [theme.breakpoints.up('md')]: {
            padding: "12px 50px",
            fontSize: "10px",
        },
    },
}));

const Episodes = () => {
    const classes = useStyles();
    const EpisodesData = useSelector((state) => state.cover.discovers?.top_episode?.data);
    const dispatch = useDispatch();
    const history = useHistory();

    const moveDetailPage = (podcast) => {
        // dispatch(setArtistItem(podcast));
        history.push(`${podcast.listen_link}`);
        // window.location.replace(`${process.env.REACT_APP_SERVER_URL}player/season/${podcast.id}`);
    }
    return (
        <div className={classes.root}>
            <Grid container>
                <Grid item container justifyContent='center' alignItems='center' direction="column" xs={12} md={6} >
                    <Typography className={clsx(classes.typography, classes.typography1)}>popular</Typography>
                    <Typography className={clsx(classes.typography,)}>episodes</Typography>
                </Grid>
                <Grid item container xs={12} md={6}>
                    {EpisodesData && EpisodesData.map((item, index) => (
                        <Grid container className={classes.gridItem} style={{ border: index == 0 && "none" }} key={index}>
                            <Grid item xs={6} sm={3}>
                                <div className={classes.image}>
                                    <Image
                                        src={item.avatarURL}
                                        alt={item.avatarURL}
                                        srcSet={item.avatarURL}
                                        lazyProps={{ width: '100%', height: '100%' }}
                                    />
                                </div>
                            </Grid>
                            <Grid item xs={6} sm={9} md={6}>
                                <Typography className={clsx(classes.typography2)}>{formatDate(item.created_at, "yyyy-MM-dd")}</Typography>
                                <Typography className={clsx(classes.typography, classes.typography3)}>{item.podcastTitle}</Typography>
                                <Typography className={clsx(classes.typography, classes.typography4)}>{item.sponsor}</Typography>
                            </Grid>

                            <Grid item container justifyContent='center' alignItems='center' xs={1} md={3}>
                                <div className={clsx(classes.typography, classes.button)} onClick={() => moveDetailPage(item)}>listen now</div>
                            </Grid>
                        </Grid>
                    ))}
                </Grid>
            </Grid>
            <div className={classes.viewAll}>
                <div className={classes.button1} onClick={() => history.push("/discover/all",1)}>VIEW ALL</div>
            </div>
        </div>
    )
}


Episodes.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default Episodes
